<template>
  <div
    :style="{ top: (posY - 10) + 'px', left: posX + 'px' }"
    class="popStay-wrap popHD"
  >
    <i class="el-icon-error close" @click="close" />
    <span class="title">
      <div v-show="remarks.WLevel === 1" class="linediv hd1" />
      <div v-show="remarks.WLevel === 2" class="linediv hd2" />
      <div v-show="remarks.WLevel === 3" class="linediv hd3" />
      <div v-show="remarks.WLevel === 4" class="linediv hd4" />
      {{ remarks.Village || remarks.Ewcode }}</span>
    <img class="line" src="../../../assets/map/popHD/popHD-line.png" alt="">
    <div class="pop-row">
      <span class="key">危险等级：</span>
      <span class="value">{{ legendTxt[(remarks.WLevel - 1)] }}</span>
      <!-- <span v-if="remarks.wLevel === 1" class="value">极危险</span>
      <span v-else-if="remarks.wLevel === 2" class="value">危险</span>
      <span v-else-if="remarks.wLevel === 3" class="value">警戒</span>
      <span v-else-if="remarks.wLevel === 4" class="value">关注</span> -->
    </div>
    <div class="pop-row">
      <span class="key">预警依据：</span>
      <span class="value">{{ getYjyjStr(remarks) }}</span>
    </div>
    <div class="pop-row">
      <span class="key">预警来源：</span>
      <span v-if="remarks.SType === '1'" class="value">雨情</span>
      <span v-if="remarks.SType === '2'" class="value">流量</span>
      <div v-show="remarks.WLevel === 1" class="linediv hd1" />
      <div v-show="remarks.WLevel === 2" class="linediv hd2" />
      <div v-show="remarks.WLevel === 3" class="linediv hd3" />
      <div v-show="remarks.WLevel === 4" class="linediv hd4" />
    </div>
    <div class="pop-row">
      <span class="key">超预警指标时间：</span>
      <span class="value">{{ $moment(remarks.Ftm).format('YYYY-MM-DD HH:mm') }}</span>
    </div>
    <!-- <div class="pop-row">
      <span class="key">村庄人数：</span>
      <span class="value">{{ remarks.PNum }}</span>
    </div>
    <div class="pop-row">
      <span class="key">防汛责任人：</span>
      <span class="value">{{ getUserList(remarks.UserList) }}</span>
    </div> -->
    <img class="line" src="../../../assets/map/popHD/popHD-line2.png" alt="">
    <div class="pop-row">
      <div class="btn" @click="showDetail">
        详细信息
      </div>
      <!-- <div class="btn" @click="warnSet">
        预警处置
      </div> -->
    </div>
    <i class="el-icon-caret-bottom arrow" />
  </div>
</template>
<script>
import pop from '../mixins/popPosStay'
export default {
    name: 'Pop',
    mixins: [pop],
    data() {
        return {
            legendTxt: ['极危险', '危险', '警戒', '关注']
        }
    },
    computed: {
        remarks: function() {
            return this.$store.getters.popStayParams.remarks
        }
    },
    mounted() {
        this.$nextTick(() => {

        })
    },
    methods: {
        getYjyjStr(data) {
            var str = ''
            if (data.SType === '2') {
                str = `关联河段洪峰流量${data.WData}m³/s，超${this.legendTxt[data.WLevel - 1]}指标（预警阈值：${data.V}m³/s）`
            }/*  else if (data.SType === '1') {
                str = `STNM(${data.Stcd})X小时降雨达到${data.WData}mm，超${this.legendTxt[data.WLevel - 1]}指标（预警阈值：${data.V}mm）`
            } */
            return str
        },
        getUserList(data) {
            var str = ''
            if (data != null && data instanceof Array) {
                str = data.map(v => {
                    return `${v.Name}:${v.Phone}`
                }).join(',<br>')
            }
            return str
        },
        showDetail() {
            const dlgParams = this.$store.getters.dlgParams
            dlgParams.name = 'WarningHdDigInfo'
            dlgParams.params = this.remarks
            dlgParams.params.rvcd = this.remarks.Ewcode
            dlgParams.params.perioD_END = this.$moment(this.remarks.Ftm).format('YYYY-MM-DD HH:mm:ss')
            dlgParams.params.Ntm = this.$moment(this.remarks.Ntm).format('YYYY-MM-DD HH:mm:ss')
            this.$store.dispatch('dlgParams', dlgParams)
            this.close()
        },
        warnSet() {
            this.close()
        },
        close() {
            this.$store.dispatch('closePopStay')
        }
    }
}
</script>

<style lang="scss" scoped>
.popStay-wrap {
  position: absolute;
  z-index: 5;
  width: 300px;
  min-height: 270px;
  &.popHD{
    background: url("../../../assets/map/popHD/popHD-frame.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .title{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 22px;
      color: #FCF9F6;
      align-self: flex-start;
    }
    .line{
      width: 90%;
    }
  }
}
.close{
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.arrow{
  position: absolute;
  bottom: -14px;
  font-size: 24px;
  color: #2E85F5;
}
.icon {
  width: 16px;
  height: 16px;
}
.linediv {
  display: inline-block;
  width: 16px;
  height: 5px;
  margin: 5px 3px;
}
.hd1 {
    background: #E22222;
}

.hd2 {
    background: #FF8D0C;
}

.hd3 {
    background: #F0C90B;
}

.hd4 {
    background: #1c38a1;
}

.pop-row {
  width: 100%;
  display: flex;
  // align-items: center;
  // justify-content: space-around;
  justify-content: flex-start;
  line-height: 16px;
  .key {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    color: #DDE8F8;
    white-space: nowrap;
  }
  .value {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    color: #DDE8F8;
  }
  .btn{
    background: url(../../../assets/map/popHD/btnPlay.png) no-repeat top center;
    background-size: 100% 100%;
    padding: 10px 20px 7px 20px;
    margin: 0 5px;
    letter-spacing: 2px;
    &:hover{
      background: url(../../../assets/map/popHD/btnPlay_active.png) no-repeat top center;
      background-size: 100% 100%;
    }
  }
}
</style>
